<template>
    <div>
        <div class="x-page-title">{{form.id !==''?'编辑商户':'新建商户'}}</div>
        <div class="x-step">
            <span :class="{'active': tagActive===1}">1、基本资料</span>
            <span :class="{'active': tagActive===2}">2、支付设置</span>
            <span :class="{'active': tagActive===3}">3、风控设置</span>
            <span :class="{'active': tagActive===4}">4、可用模版</span>
        </div>

        <div class="baseSetting" v-if="tagActive===1">
            <el-form ref="baseform" :model="form" label-width="80px">
                <el-form-item label="商户名称">
                    <el-input class="normal" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input class="normal" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input class="normal" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="联系地址">
                    <el-input class="normal" type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item label="购票链接">
                    <el-input class="normal" type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="nextStep(2)">下一步</el-button>
                <el-button @click="closePage">取消</el-button>
            </div>
        </div>

        <div class="paySetting" v-else-if="tagActive===2">
            <el-form ref="payform" :model="form" label-width="80px">
                <el-form-item>
                    支付配置参考火影的设置方式，但每项支付后需要增加启用功能<el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="nextStep(3)">下一步</el-button>
                <el-button @click="closePage">取消</el-button>
            </div>
        </div>

        <div class="dangerSetting" v-else-if="tagActive===3">
            <el-form ref="dangerform" :model="form">
                <el-form-item>
                    <h3>虚拟号段设置</h3>
                    虚拟号段禁止参加任何活动及购票。请输入虚拟号段前三位，每个号段用“、”隔开，如177、199。<br>
                    <el-input></el-input>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="nextStep(4)">下一步</el-button>
                <el-button @click="closePage">取消</el-button>
            </div>
        </div>

        <div class="modelSetting" v-else>
            <el-form ref="modelform" :model="form">
                <el-row v-for="(item, key) in models" :key="key">
                    <el-form-item :label="item.type" v-for="(child, _key) in item.children" :key="_key" label-width="110px">
                        <br v-if="child.title!==''">
                        <span v-if="child.title!==''" style="display: inline-block;width:80px;text-align:right;margin-left: -92px;margin-right: 8px;">{{child.title}}</span>
                        <div class="x-model-box">
                            <el-checkbox v-model="item.checkAll">全选</el-checkbox><br>
                            <div class="x-model" v-for="(childM, __key) in child.model" :key="__key">
                                <el-checkbox v-model="childM.checked">{{childM.modelName}}</el-checkbox>
                                <div class="x-model-cover"><img :src="childM.modelCover" alt=""></div>
                            </div>
                        </div>
                    </el-form-item>
                </el-row>
            </el-form>
            <div>
                <el-button type="primary" @click="nextStep(4)">下一步</el-button>
                <el-button @click="closePage">取消</el-button>
            </div>
        </div>

    </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';

export default {
    data() {
        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            tagActive: 1,
            models: [
                {
                    type: '限时抢券模版',
                    children: [
                        {
                            title: '',
                            checkAll: false,
                            model: [{ id: 1, modelName: '模版1', modelCover: '', checked: false },{ id: 2, modelName: '模版2', modelCover: '', checked: false },{ id: 3, modelName: '模版3', modelCover: '', checked: false },{ id: 4, modelName: '模版4', modelCover: '' },{ id: 5, modelName: '模版5', modelCover: '', checked: false },{ id: 6, modelName: '模版6', modelCover: '', checked: false },{ id: 7, modelName: '模版7', modelCover: '', checked: false }]
                        }
                    ]
                },
                {
                    type: '抽奖模版',
                    children: [
                        {
                            title: '大转盘',
                            checkAll: false,
                            model: [{ id: 1, modelName: '模版1', modelCover: '', checked: false },{ id: 2, modelName: '模版2', modelCover: '', checked: false },{ id: 3, modelName: '模版3', modelCover: '', checked: false },{ id: 4, modelName: '模版4', modelCover: '' },{ id: 5, modelName: '模版5', modelCover: '', checked: false },{ id: 6, modelName: '模版6', modelCover: '', checked: false },{ id: 7, modelName: '模版7', modelCover: '', checked: false }]
                        },
                        {
                            title: '刮刮乐',
                            checkAll: false,
                            model: [{ id: 1, modelName: '模版1', modelCover: '', checked: false },{ id: 2, modelName: '模版2', modelCover: '', checked: false },{ id: 3, modelName: '模版3', modelCover: '', checked: false },{ id: 4, modelName: '模版4', modelCover: '' },{ id: 5, modelName: '模版5', modelCover: '', checked: false },{ id: 6, modelName: '模版6', modelCover: '', checked: false },{ id: 7, modelName: '模版7', modelCover: '', checked: false }]
                        },
                        {
                            title: '翻牌',
                            checkAll: false,
                            model: [{ id: 1, modelName: '模版1', modelCover: '' },{ id: 2, modelName: '模版2', modelCover: '' },{ id: 3, modelName: '模版3', modelCover: '' },{ id: 4, modelName: '模版4', modelCover: '' },{ id: 5, modelName: '模版5', modelCover: '' },{ id: 6, modelName: '模版6', modelCover: '' },{ id: 7, modelName: '模版7', modelCover: '' }]
                        },
                    ]
                },
                {
                    type: 'H5主活动模版',
                    children: [
                        {
                            title: '',
                            checkAll: false,
                            model: [{ id: 1, modelName: '模版1', modelCover: '', checked: false },{ id: 2, modelName: '模版2', modelCover: '', checked: false },{ id: 3, modelName: '模版3', modelCover: '', checked: false },{ id: 4, modelName: '模版4', modelCover: '' },{ id: 5, modelName: '模版5', modelCover: '', checked: false },{ id: 6, modelName: '模版6', modelCover: '', checked: false },{ id: 7, modelName: '模版7', modelCover: '', checked: false }]
                        },
                    ]
                }
            ],
            checked: true
        }
    },
    methods: {
        // onSubmit() {
        //     console.log('submit!');
        // },
        ...mapActions('app', ['handleRemoveTab']),
        nextStep(step) {
            this.tagActive = +step;
        },
        closePage() {
            // this.$store.dispatch('handleChangetabs', this.$route);
            this.$router.push('/baseSetting/businessesManage/businessesList');
            this.$store.dispatch('handleRemoveTab', '新建商户');
        }
    },
    created() {
        this.form.id = this.$route.query.id;
        
    }
}
</script>
<style lang="less" scoped>
@import "~style/var.less";
    .x-step { display: flex;margin-bottom: 20px;
        span {
            display: inline-block;
            width: 160px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: @color-grey-font;
            font-size: @font14;
            border: 1px solid @color-grey-border;
            box-sizing: border-box;
            &:first-child {
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            &:last-child {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
            &.active {
                color: #fff;
                border: 0;
                background: @color-blue;
            }
        }
    }

    .x-model-box {
        display: inline-block;
        vertical-align: top;
        .x-model {
            display: inline-block;
            margin-right: 20px;
            .x-model-cover {
                width: 90px;
                height: 120px;
                background: @color-grey-border;
            }
        }
    }
</style>
